<template>
  <div class="comment-section">
    <div class="comment-form">
      <el-input
          v-model="commentContent"
          placeholder="输入评论..."
          :disabled="!user.isLogin">
        <template v-if="allowAnonymous" slot="prepend">
          <el-checkbox v-model="anonymous">匿名</el-checkbox>
        </template>
        <el-button
            slot="append"
            type="primary"
            :disabled="!commentContent"
            @click="submitComment">
          发送
        </el-button>
      </el-input>
    </div>

    <div class="comment-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <span v-if="comment.anonymous">匿名用户</span>
          <span v-else>{{ comment.author }}</span>
          <span class="time">{{ comment.time }}</span>
        </div>
        <div class="comment-content">{{ comment.content }}</div>
      </div>
    </div>
  </div>
</template>